import { Card, Space, Button, Tooltip } from '@douyinfe/semi-ui';
import { IconArrowUpLeft } from '@douyinfe/semi-icons';
import ApplicationDetail from './detail';
import { useNavigate } from 'react-router-dom';
import { useSelector, shallowEqual } from 'react-redux';
import { IRootReducerState } from '@/store/root-reducer';
import { usePageContext } from '../context';
import { useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import ApplicationStepNav from '../step-nav';
import ApplicationEdit from './edit';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';

const ApplicationEntityCard = ({ editable = false }) => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {};
  }, [PageContext]);

  const {
    application: { entity, entities },
  } = useSelector<IRootReducerState, any>(
    (state) => ({ application: state.application }),
    shallowEqual
  );

  const dispatch = useDispatch<any>();

  const [formApi, setFormApi] = useState<FormApi<any>>();

  return (
    <Card
      bordered={false}
      title={
        <Space>
          <Tooltip content='返回'>
            <span style={{ display: 'inline-block' }}>
              <Button
                icon={<IconArrowUpLeft />}
                type='tertiary'
                onClick={() => navigate(-1)}
              />
            </span>
          </Tooltip>
          <ApplicationStepNav />
        </Space>
      }
      headerExtraContent={
        editable ? (
          <Space>
            <Button
              theme='solid'
              onClick={() => {
                console.log(formApi?.getValues());
              }}
            >
              保存
            </Button>
            <Button onClick={() => navigate(-1)}>取消</Button>
          </Space>
        ) : null
      }
    >
      {editable ? (
        <>
          <ApplicationEdit formApiRef={setFormApi} />
        </>
      ) : (
        <ApplicationDetail entity={entity} />
      )}
    </Card>
  );
};

export default ApplicationEntityCard;
